<template>
  <div class="footNavigation">
    <div
      class="imgBox"
      v-for="(item, index) in navgation"
      :key="index"
      @click="goNavigationFn(index)"
    >
      <div class="navigation center">
        {{ $t(`messages.WarrantySerachData.footImage[${index}].pathName`) }}
      </div>
      <img :src="$t(`messages.WarrantySerachData.footImage[${index}].image`)" alt="" srcset="" />
    </div>
  </div>
</template>

<script setup>
import { footimage } from '@/http/api/WarrantySerach.js'
import Zh from '@/assets/i18n/langs/zh.js'
import En from '@/assets/i18n/langs/en.js'
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let pageData = reactive({
  page: 1,
  size: 50
})
let navgation = ref([])
const getData = async () => {
  const res = await footimage(pageData)
  navgation.value = res.res
  Zh.messages.WarrantySerachData.footImage = res.res.map((item, index) => {
    return {
      image: item.imageZh,
      pathName: item.pathNameZh
    }
  })
  En.messages.WarrantySerachData.footImage = res.res.map((item, index) => {
    return {
      image: item.imageEn,
      pathName: item.pathNameEn
    }
  })
}
const goNavigationFn = (index) => {
  router.push(navgation.value[index].path)

}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
@keyframes imgBoxFlex {
  /* from表示动画的开始位置，也可以使用0%来表示。 */
  from {
    flex: 2;
  }
  /* to表示动画的结束位置，也可以使用100%来表示。 */
  to {
    flex: 4;
  }
}
@keyframes imgBoxFlex2 {
  /* from表示动画的开始位置，也可以使用0%来表示。 */
  from {
    flex: 4;
  }
  /* to表示动画的结束位置，也可以使用100%来表示。 */
  to {
    flex: 2;
  }
}
.footNavigation {
  display: flex;
  height: 900px;
  background: #121617;
  .imgBox {
    flex: 2;
    height: 100%;
    position: relative;
    cursor: pointer;
    animation: imgBoxFlex2 0.5s ease-in forwards;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .imgBox:hover {
    animation: imgBoxFlex 0.5s ease-in forwards;
  }
}
.navigation {
  font-size: 38px;
  font-weight: bold;
  color: #ffdd00;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>